<template>
  <div class="NewsList">
    <!-- <van-nav-bar :title="pageTitle" left-arrow @click-left="backHome" /> -->
    <nav-bar :title="pageTitle"></nav-bar>
    <div class="NewsList-content">
      <van-tabs v-model="active" sticky color="#0050A5" title-active-color="#0050A5" @click="tabsClick">
        <van-tab
          v-for="(tab, tabKey) in tabs"
          title-style="font-size:16x;"
          :key="tabKey"
          :title="tab.title"
        >
          <van-list
            v-model="tab.loading"
            :finished="tab.finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- <div style="margin-top:20px;">
              <div
                class="NewsList-content-item"
                @click="skipRouter({path:'/newsDetail',query:{newsId:item.newsId}})"
                v-for="(item, index) in tab.child"
                :key="index"
              >
                <div class="title">{{item.title}}</div>
                <div class="newsAbsrtact">{{item.newsAbstract}}</div>
                <div class="tagAndTime">
                  <div class="tag">
                    <van-tag v-show="index<9" plain type="danger" size="medium">置顶</van-tag>
                  </div>
                  <div class="time">{{item.createTime.split(" ")[0]}}</div>
                </div>
                <van-divider />
              </div>
            </div> -->
            <news-item :list="tab.child"></news-item>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <!-- <div class="home-more">
      <van-divider :style="{ color: '#0050A5', borderColor: '#BFBFBF', padding: '0 16px' }">查看更多</van-divider>
    </div>-->
  </div>
</template>

<script>
import newsItem from '@/components/news/newsItem'
import navBar from "@/components/NavBar";
export default {
  name: "NewsList",
  components:{
    newsItem,
    navBar
  },
  data() {
    return {
      imgUrl: config.imgUrl,
      pageTitle: "",
      active: 0,
      tabs: [
        {
          title: "新闻资讯",
          loading: false,
          finished: false,
          newsParam: {
            page: 0,
            pageSize: 20,
            category: 0
          },
          child: []
        },
        {
          title: "协会动态",
          loading: false,
          finished: false,
          newsParam: {
            page: 0,
            pageSize: 20,
            category: 1
          },
          child: []
        },
        {
          title: "行业公示",
          loading: false,
          finished: false,
          newsParam: {
            page: 0,
            pageSize: 20,
            category: 5
          },
          child: []
        }
      ],
      newsCategory: 0
    };
  },
  methods: {
    backHome() {
      this.$router.back();
    },
    skipRouter(routerObj) {
      this.$router.push(routerObj);
    },
    onLoad() {
      this.findNewsList();
    },
    tabsClick(index, title) {
      this.pageTitle = title;
      this.$router.replace({
          query:{'newsCategory':this.tabs[index].newsParam.category}
      })
    },
    findNewsList() {
      this.tabs[this.active].newsParam.page++;
      this.$request({
        url: "/news/selectNewsList",
        method: "post",
        data: this.tabs[this.active].newsParam
      }).then(rsp => {
        if (rsp.code === 200) {
          if (this.tabs[this.active].newsParam.page === 1) {
            this.tabs[this.active].child = rsp.data.list;
          } else {
            this.tabs[this.active].child.splice(-1, 0, ...rsp.data.list);
          }
          this.tabs[this.active].loading = false;
          if (this.tabs[this.active].child.length >= rsp.data.total) {
            this.tabs[this.active].finished = true;
          } else {
            this.tabs[this.active].finished = false;
          }
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    }
  },
  mounted() {
    this.newsCategory = this.$route.query.newsCategory;
    // console.log(this.newsCategory)
    if (this.newsCategory == 0) {
      this.active = 0;
    } else if (this.newsCategory == 1) {
      this.active = 1;
    } else if (this.newsCategory == 5) {
      this.active = 2;
    }
    this.pageTitle = this.tabs[this.active].title;
    // console.log(this.pageTitle);
  }
};
</script>

<style lang='scss'>
@import "../assets/css/base";

.NewsList {
  &-content {
    width: px2rem(690);
    margin: 0 auto;
    overflow: hidden;
    .van-hairline--top-bottom {
      border: none !important;
    }
    // &-item {
    //   // margin-top: px2rem(40);
    //   .title {
    //     font-size: px2rem(38);
    //     color: #000000;
    //     line-height: px2rem(60);
    //     // font-weight: 400;
    //   }
    //   .newsAbsrtact {
    //     color: #969799;
    //     font-size: px2rem(32);
    //     line-height: px2rem(52);
    //     overflow: hidden;
    //     text-overflow: ellipsis;
    //     word-break: break-all;
    //     -webkit-line-clamp: 3;
    //     -webkit-box-orient: vertical;
    //     display: -webkit-box;
    //     margin-top: px2rem(10);
    //   }
    //   .tagAndTime {
    //     display: flex;
    //     justify-content: space-between;
    //     line-height: px2rem(40);
    //     .time {
    //       font-size: px2rem(28);
    //       color: #969799;
    //       padding-top: px2rem(24);
    //       padding-right: px2rem(20);
    //     }
    //   }
    // }
    // &-item{
    //   display: block;
    //   margin-top: px2rem(40);
    //   padding-bottom: px2rem(30);
    //   .news-top{
    //     width: 100%;
    //     @include flex();
    //     &-title{
    //       width: px2rem(400);
    //       font-size: px2rem(28);
    //       color: #000000;
    //       font-weight: 400;
    //       margin-left: px2rem(20);
    //     }
    //     &>.isTop{
    //       width: px2rem(140);
    //       background: url("../assets/img/news/top.png") left center no-repeat;
    //       background-size: px2rem(15) px2rem(17);
    //       box-sizing: border-box;
    //       padding-left: px2rem(30);
    //       font-size: px2rem(20);
    //       color: #ff0000;
    //     }
    //   }
    //   .news-poster{
    //     margin: px2rem(20) 0;
    //     position: relative;
    //     width: 100%;
    //     &>img{
    //       width: px2rem(690);
    //       height: px2rem(332px);
    //       border-radius: 5px;
    //       display: block;
    //     }
    //     &-date{
    //       position: absolute;
    //       bottom: 0;
    //       right: 0;
    //       width:px2rem(187);
    //       height:px2rem(35);
    //       background:rgba(0,0,0,0.5);
    //       border-radius:px2rem(10) 0 px2rem(10) 0;
    //       text-align: center;
    //       line-height: px2rem(35);
    //       font-size: px2rem(20);
    //       color: #ffffff;
    //     }
    //   }
    //   .news-content{
    //     width: 100%;
    //     font-size: px2rem(24);
    //     color: #848484;
    //     line-height: 1.7;
    //   }
    // }
  }
}
</style>
